响应式设计：Drawer抽屉组件样式调整
管理后台不仅需要适配桌面端，还需要考虑平板和移动端的显示效果。在小屏幕设备上，左侧菜单应该切换为 Drawer 抽屉模式——用户点击汉堡菜单按钮后，菜单从侧边滑出。同时，Header 的工具组件也需要在小屏幕上隐藏或折叠。
响应式断点策略
使用 Tailwind CSS 的断点系统：
| 断点 | 像素 | 典型设备 |
|---|---|---|
| sm | 640px | 大屏手机 |
| md | 768px | 平板竖屏 |
| lg | 1024px | 平板横屏 |
| xl | 1280px | 笔记本 |
| 2xl | 1536px | 桌面显示器 |
管理后台的响应式策略：
| 屏幕 | 菜单 | Header 工具 | 侧栏 |
|---|---|---|---|
| >= lg | 固定侧栏 | 全部显示 | 始终显示 |
| < lg | Drawer 抽屉 | 部分隐藏 | 按需显示 |
侧栏响应式切换
在 Layout 组件中，根据屏幕宽度决定显示固定侧栏还是 Drawer：
<template>
<!-- 桌面端：固定侧栏 -->
<aside v-if="isDesktop" class="hidden lg:block">
<Menu :data="menus" />
</aside>
<!-- 移动端：Drawer 抽屉 -->
<el-drawer
v-else
v-model="drawerVisible"
direction="ltr"
:size="240"
>
<Menu :data="menus" />
</el-drawer>
</template>
<script setup lang="ts">
import { useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints({
desktop: 1024,
})
const isDesktop = breakpoints.greater('desktop')
const drawerVisible = ref(false)
</script>
vue
VueUse 的 useBreakpoints composable 提供了响应式的屏幕宽度判断。
Header 工具的响应式隐藏
小屏幕下隐藏部分工具组件，只保留核心功能：
<div class="flex items-center gap-2">
<!-- 始终显示 -->
<Iconify icon="ep:fold" @click="toggleDrawer" />
<!-- lg 以上显示 -->
<ChangeLocale v-if="isDesktop" />
<DarkModeToggle v-if="isDesktop" />
<!-- 始终显示 -->
<ThemeSettings />
<AvatarMenu />
</div>
vue
Drawer 的尺寸适配
Drawer 的宽度在不同设备上应有不同的默认值：
const drawerSize = computed(() => {
return window.innerWidth < 640 ? '80%' : '240px'
})
typescript
在小屏设备上使用百分比宽度，确保不会超出屏幕范围。
Header 的响应式高度
/* Tailwind 响应式类 */
.h-10 md:h-12 lg:h-14
css
小屏幕下 Header 高度减小，为内容区留出更多空间。
本节小结
- 断点策略：使用 Tailwind 的
lg（1024px）作为桌面/移动端分界点。 - 侧栏切换：桌面端显示固定侧栏，移动端使用 Drawer 抽屉。
- 工具隐藏：小屏幕下隐藏国际化、暗黑模式等非核心工具。
- VueUse：
useBreakpoints提供响应式的屏幕宽度判断。
↑